<!--
  @author:  long
  @date:    2023/3/29
  @file:    xx
  @require:
-->
<template>
  <div class="seasonInfo">
    <el-date-picker
      v-model="year"
      type="year"
      placeholder="请选择年份"
      value-format="YYYY"
      format="YYYY"
      @change="handleCalendarQuery"
    />
    <el-tabs v-model="tabActiveName" @tab-change="tabChange">
      <el-tab-pane
        v-for="(item, index) in seasonTabs"
        :key="item.name"
        :label="item.label"
        :name="item.name"
      >
        <div>
          <title-name
            icon="i-carbon-bookmark-filled"
            class="mb-6"
            margin-left="0"
            :title="item.label + '考评说明'"
          ></title-name>
          <el-descriptions class="margin-top" :column="2" border>
            <el-descriptions-item
              v-for="(t, i) in infoObjs"
              :key="i"
              :label="t.label"
              class="w-full"
            >
              <template #label>
                <div class="text-center tracking-widest text-ms">
                  {{ t.label }}
                </div>
              </template>
              <div v-if="infoData.length > 0">
                <div v-if="t.prop == 'assessStatus'">
                  <dict-tag
                    :options="assess_status"
                    :value="infoData[index][t.prop]"
                  />
                </div>
                <div v-else-if="t.prop == 'resultInMonth'" class="w-full">
                  <template v-if="infoData[index][t.prop] != ''">
                    <el-tag
                      :key="tag"
                      class="m-1"
                      v-for="tag in infoData[index][t.prop].split(',')"
                    >
                      <dict-tag :options="month_dict" :value="tag" />
                    </el-tag>
                  </template>
                  <template v-else>
                    {{ infoData[index][t.prop] }}
                  </template>
                </div>
                <div v-else>{{ infoData[index][t.prop] }}</div>
              </div>
            </el-descriptions-item>
          </el-descriptions>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup name="seasonInfo">
import { getCurrentInstance } from 'vue'
import { getScheduleInfo } from '@/api/officeManage/evaluation'
import useUserStore from '@/store/modules/user'
import { format } from 'date-fns'
const { proxy } = getCurrentInstance()
const emits = defineEmits(['change'])
const { assess_status, month_dict } = proxy.useDict(
  'assess_status',
  'month_dict'
)
const userStore = useUserStore()

const data = reactive({
  year: format(new Date(), 'yyyy'),
  infoData: [],
  // monthTabs 对象数组 label name
  seasonTabs: [
    { label: '第一季度', name: '1' },
    { label: '第二季度', name: '2' },
    { label: '第三季度', name: '3' },
    { label: '第四季度', name: '4' }
  ],
  tabActiveName: '1',
  infoObjs: [
    { label: '状态', prop: 'assessStatus' },
    { label: '备注', prop: 'assessRemark' },
    { label: '开始时间', prop: 'assessStime' },
    { label: '结束时间', prop: 'assessEtime' },
    { label: '考评结果归属月', prop: 'resultInMonth' }
  ]
})
const { year, seasonTabs, tabActiveName, infoObjs, infoData } = toRefs(data)

/**
 * tabs切换
 * @param val
 */
const tabChange = val => {
  console.info('val111', val)
  let index = val * 1 - 1
  if (infoData.value != null && infoData.value.length > 0) {
    emits('change', infoData.value[index], seasonTabs.value[index].name)
  } else {
    emits('change', {}, seasonTabs.value[index].name)
  }
}

/**
 * 日历查询
 */
const handleCalendarQuery = () => {
  let params = {
    orgId: userStore.user.orgId,
    deptId: userStore.user.deptId,
    scheduleType: '1',
    assessAtYear: year.value
  }

  getScheduleInfo(params).then(res => {
    infoData.value =
      res.data == null || res.data.length == 0
        ? []
        : res.data.sort((ar1, ar2) => ar1.assessAtTime - ar2.assessAtTime)
    tabChange(tabActiveName.value)
  })
}
defineExpose({
  year,
  handleCalendarQuery
})

const init = async () => {
  handleCalendarQuery()
}
init()
</script>

<style scoped lang="scss"></style>
